<template>
	<view>
		<view class="u-demo-block">
			<u-swiper radius="0" circular :list="list5" @change="(e) => (current = e.current)">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in list5" :key="index" :class="[index === current && 'indicator__dot--active']"></view>
				</view>
			</u-swiper>
		</view>
		<view class="list-cont">
			<consult-list></consult-list>
		</view>
	</view>
</template>

<script>
	import banner1 from '../../static/img/consult/banner1.png'
	import banner2 from '../../static/img/consult/banner2.png'
	import banner3 from '../../static/img/consult/banner3.png'
export default {
	data() {
		return {
			list5: [banner1, banner2, banner3],
			current: 0
		};
	},
	methods: {}
};
</script>

<style scoped lang="scss">
.indicator {
	@include flex(row);
	justify-content: center;

	&__dot {
		height: 20upx;
		width: 20upx;
		border-radius: 100upx;
		background-color: rgba(255, 255, 255, 1);
		margin: 0 5px;
		transition: background-color 0.3s;

		&--active {
			height: 24upx;
			width: 24upx;
			position: relative;
			bottom: 4upx;
			background-color: #f04b3f;
		}
	}
}

.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;

	&__text {
		color: #ffffff;
		font-size: 12px;
	}
}
.list-cont {
	padding: 0 30upx;
}
</style>
